<template>
	<view class="content-box">
		<myLoading v-show="isLogin == 1"></myLoading>
		<u-navbar :is-back="false" title="TOU透氧教练端" :background="background" title-color="#ffffff;"></u-navbar>
		<view class="index-nav">
			<image class="index-nav-bg" src="https://image.nanjingtouyang.com/touy/2024/05/11/e0d7fa12af1f44c9af07e9813f03e80c.png" mode=""></image>
			<view class="Sarch">
				<image class="input-uni-icon" src="https://image.nanjingtouyang.com/touy/2024/02/21/5cdd5c1dcfec4f0bbb40d7204f3ea8b9.png" mode=""></image>
				<input :disabled="isLogin == 0" confirm-type="search" v-model="searchText" class="nav-bar-input" type="text" placeholder="请输入邀约人昵称/手机号"
					@input="confirmInput" />
			</view>
		</view>
		<!-- 导航栏 -->
		<view class="navbar-view" v-if="isLogin == 1">
			<scroll-view class="choose-scroll"
				scroll-x="true" 
				scroll-with-animation 
				:scroll-into-view="'tab' + navId">
				<view 
					v-for="(item, index) in navList" 
					:key="index" @click="chooseNav(item)"
					:class="item.id == navId ? 'choose-scroll-item choose-scroll-item-active': 'choose-scroll-item'"
					:id="'tab' + item.id">
					<view class="item-view">
						<view :class="navId == item.id ? 'scroll-item-line-active scroll-item-line' : 'scroll-item-line'"></view>
						<view :class="navId == item.id ? 'scroll-item-name-active scroll-item-name' : 'scroll-item-name'">{{ item.name }}<text v-show="item.num">({{ item.num }})</text></view>
					</view>
					
				</view>
			</scroll-view>
		</view>
		
		<!-- 未登录 -->
		<view class="login-view" v-if="isLogin == 0">
			<image class="login-bg" src="https://image.nanjingtouyang.com/touy/2024/05/14/81f5b650a16348cbbd32a3d0a997b2bc.png"></image>
			<view class="login-text">教练，还没有登录哦～</view>
			<view class="login-button" @click="toLogin">立即登录</view>
		</view>
		
		<!-- 列表 -->
		<view class="yaoyue-list" v-else>
			<view class="have-none-view"  v-if="yaoYueLength == 0">
				<image class="none-image" src="https://image.nanjingtouyang.com/touy/2023/11/2023110814245894940.png" mode=""></image>
				<view class="have-none-text">哎呀，暂无邀约哦~</view>
			</view>
			<view v-else class="yaoyue-view">
				<view class="" v-for="(item, index) in yaoYueList" :key="index" >
					<view class="yueban-view-item"  @click="toYaoYueDetail(item)">
						<!-- 顶部悬浮头像 -->
						<view class="yaoyue-top-head">
							<view class="top-head-box">
								<view class="top-head-box-image">
									<image v-if="item.userAvatar" class="username-image" :src="item.userAvatar"></image>
									<image v-else class="username-image" src="https://image.nanjingtouyang.com/touy/2023/09/2023090515054870864.png" mode=""></image>
								</view>
								
							</view>
							<view class="top-head-txt" v-if="item.serviceType == 1">
								<image v-if="item.quantity == 2" class="txt-icon" src="https://image.nanjingtouyang.com/touy/2024/06/17/07e0a9fe1da54512a7713e99432e4667.png" mode=""></image>
								<image v-else class="txt-icon" src="https://image.nanjingtouyang.com/touy/2024/06/17/a56b474f7d3344919337a93bb96bd786.png" mode=""></image>
								
							</view>
							<view class="top-head-txt" v-else>
								<image class="txt-icon" src="https://image.nanjingtouyang.com/touy/2024/06/26/68b174f0dbcf4513b173b979ccaa924a.png" mode=""></image>
							</view>
							<!-- <view class="top-head-type">1v{{ item.quantity }}</view> -->
						</view>
						<view class="yueban-view-top">
							<view class="top-username">
								<view class="username-name">{{ item.userName }}</view>
								<view class="title-type-view">
									<image v-if="item.serviceType == 1" class="view-icon" src="https://image.nanjingtouyang.com/touy/2024/06/25/2b47803d4f824f29844326c0b9449926.png" mode=""></image>
									<image v-else class="view-icon" src="https://image.nanjingtouyang.com/touy/2024/06/25/c235dbd6944747ebb903f92fd0c6a735.png" mode=""></image>
									<view v-if="item.serviceType == 1" class="view-icon-text">健身</view>
									<view v-else class="view-icon-text">瑜伽</view>	
								</view>
								<!-- <view class="username-type">{{ item.aptItem }}</view> -->
							</view>
							<view class="right-type">
								<view class="type-text">
									<text v-show="item.aptTimeLabel == '待开始'">{{ item.aptTimeLabel }}</text>
									<text v-show="item.aptTimeLabel == '进行中'" style="color: #E02020;">{{ item.aptTimeLabel }}</text>
									<text v-show="item.aptTimeLabel == '已结束'" style="color: #666666;">{{ item.aptTimeLabel }}</text>
								</view>
								<view class="right-bottom" v-if="item.distanceLabel == null" @click.stop="getLocationList()">
									<image class="right-bottom-icon" src="https://image.nanjingtouyang.com/touy/2024/02/20/109b25998b22478abd91d8b43d8b9fb6.png"></image>
									<view class="right-bottom-text">去授权定位</view>
								</view>
								<view class="right-bottom" @click.stop="toLocation(item)">
									<image class="right-bottom-icon" src="https://image.nanjingtouyang.com/touy/2024/02/20/109b25998b22478abd91d8b43d8b9fb6.png"></image>
									<view class="right-bottom-text" style="color: #333333;">{{ item.distanceLabel }}</view>
								</view>
							</view>
						</view>
						<view class="yueban-view-image">
							<view class="time-view">
								<img class="time-view-icon" src="https://image.nanjingtouyang.com/touy/2024/02/19/d208f94511994ece9bf721d4bdbb0e5f.png"/>
								<view class="place-text">
									{{item.shopName||item.addr}}
								</view>
							</view>
							<view class="time-view">
								<img class="time-view-icon" src="https://image.nanjingtouyang.com/touy/2024/02/19/980bedf319ee49909146843e3383ced9.png"/>
								<view class="place-text">
									{{item.aptTime}}
								</view>
							</view>
						</view>
						<view class="yaoyue-bottom">
							<view class="yaoyue-bottom-text">
								<text v-show="item.quantity == 2">{{ item.transWayLabel }}</text>
							
							</view>
							<view class="yaoyue-bottom-line">节点：{{ item.flowStatusLabel }}</view>
						</view>	
						
					</view>
					<!-- 底部报名按钮 -->
					<!--  2-->
					<view class="yaoyue-button" v-if="navId == 2">
						<view class="yaoyue-button-item item-no" @click="openCover(item.aptId)">拒绝</view>
						<view class="yaoyue-button-item" @click="openReceiveCover(item.aptId)">接单</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 拒绝弹窗 -->
		<u-popup v-model="coverShow" mode="bottom" border-radius="30" closeable="true">
			<view>
				<view class="choose-type-box">
					<view class="type-box-title">拒绝接单</view>
					<view class="center_box">
						<view class="center_tit">
							<h1>拒绝接单的理由（单选）</h1>
						</view>
						<view class="bottom_box">
							<view class="reason-list">
								<view class="reason-list-item" v-for="(item, index) in reasonList" :key="index">
									<view class="list-item-name">{{ item.name }}</view>
									<view class="list-item-image" @click="chooseReason(item)">
										<image v-if="item.id == reasonId" class="image-item" src="https://image.nanjingtouyang.com/touy/2023/11/202311091609162298.png" mode=""></image>
										<image v-else class="image-item" src="https://image.nanjingtouyang.com/touy/2023/11/2023110916153097444.png" mode=""></image>
										
									</view>
								</view>
							</view>
							<view class="reason-view">
								<textarea class="textarea-input" placeholder="请补充拒绝理由" v-model="refundReason" maxlength="100"/>
							</view>
							
							<view class="reson-submit-box" @click="closeCover">
								提交
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-modal v-model="receiveCoverShow"
			@confirm="receiveOrder" 
			@cancel="closeReceiveCover"
			ref="uModal" 
			show-cancel-button="true" 
			show-title="false"
			cancel-text="再想想" cancel-color="#333333"
			confirm-text="确认" confirm-color="#46973B"
			borderRadius="35"
			>
			<view class="slot-content">
				<view class="content-title">
					是否确认接单？
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { getWorkList, getWorkListCount, spAcceptApt } from "@/api/index.js"
	export default {
		data() {
			return {
				title: 'Hello',
				navList: [
					{ id: 1, name: '用户处理中' },
					{ id: 2, name: '待我接单', num: 0 },
					{ id: 3, name: '待我核销', num: 0},
					{ id: 4, name: '已处理' },
					{ id: 5, name: '已取消' },
				],
				navId: 1,
				pageNum: 1,
				yaoYueList: [],
				yaoYueLength: '',
				coverShow: false,
				reasonList: [
					{ id: 1, name: '预约时间段已有其他安排' },
					{ id: 2, name: '因个人原因暂时无接单打算' },
					{ id: 3, name: '用户联系暂时取消服务' },
					{ id: 4, name: '与场馆沟通暂无场地' },
					{ id: 5, name: '其他' }
				],
				reasonId: 1,
				desc: '',
				refundReason: '预约时间段已有其他安排',
				isLogin: '',
				receiveCoverShow: false,
				searchText: '',
				aptId: ''
				// background: 'url(https://image.nanjingtouyang.com/touy/2024/05/11/e0d7fa12af1f44c9af07e9813f03e80c.png) no-repeat',
			}
		},
		onLoad() {
			// if(uni.getStorageSync('spToken')) {
			// 	this.isLogin = 1
			// } else {
			// 	this.isLogin = 0
			// }
			uni.setStorageSync('indexFresh', true)
			
		},
		onPullDownRefresh() {
			// uni.showNavigationBarLoading()
			this.pageNum = 1
			this.getYaoYue()
			
			setTimeout(function () {
				uni.hideNavigationBarLoading();
				uni.stopPullDownRefresh();
			}, 500)
		},
		onReachBottom() {
			this.pageNum ++
			this.getYaoYue()
		},
		onShow() {
			if(uni.getStorageSync('spToken')) {
				this.isLogin = 1
				if(uni.getStorageSync('indexFresh') == true) {
					this.getYaoYue()
				}
				
			} else {
				this.isLogin = 0
			}
		},
		methods: {
			confirmInput() {
				this.pageNum = 1
				this.getYaoYue()
			},
			openCover(id) {
				this.aptId = id
				this.coverShow = true
			},
			closeCover() {
				this.coverShow = false
				spAcceptApt({
					aptId: this.aptId,
					audit: 0,
					auditReason: this.refundReason
				}).then(res => {
					if(res.data.code == 200) {
						uni.showToast({
							title:'操作成功！',
							icon:'none'
						})
						this.getYaoYue()
					}else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
						
					}
				})
			},
			openReceiveCover(id) {
				this.aptId = id
				this.receiveCoverShow = true
			},
			receiveOrder() {
				spAcceptApt({
					aptId: this.aptId,
					audit: 1
				}).then(res => {
					if(res.data.code == 200) {
						uni.showToast({
							title:'接单成功！',
							icon:'none'
						})
						this.getYaoYue()
					}else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
						
					}
				})
			},
			
			closeReceiveCover() {
				this.receiveCoverShow = false
			},
			chooseNav(item) {
				this.navId = item.id
				this.pageNum = 1
				this.yaoYueList = []
				this.yaoYueLength = 0
				this.getYaoYue()
			},
			toLogin() {
				uni.navigateTo({
					url:'../../pages/login/index'
				})
			},
			chooseReason(item) {
				this.reasonId = item.id
				this.refundReason = item.name
			},
			getYaoYue() {
				getWorkList({
					pageNum:this.pageNum,
					pageSize: 10,
					qryType: this.navId,
					userSearch: this.searchText,
				}).then(res => {
					getWorkListCount().then(res=> {
						this.navList[1].num = res.data.data.spAcceptCount
						this.navList[2].num = res.data.data.spVerifyCount
						
					})
					if(this.pageNum == 1) {
						this.yaoYueList = res.data.data
					} else {
						this.yaoYueList = this.yaoYueList.concat(res.data.data)
					}
					this.yaoYueLength = this.yaoYueList.length
					
				})
			},
			toYaoYueDetail(item) {
				uni.setStorageSync('indexFresh', false)
				uni.navigateTo({
					url:'../../pages/yaoyue-detail/index?id='+ item.aptId
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
